<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas5</title>
</head>

<body>
    <canvas id="app" width="500" height="600"></canvas>
    <script type="text/javascript">
    function draw8(id) {
        var canvas = document.getElementById(id);
        if (canvas == null)
            return false;
        var context = canvas.getContext("2d");
        //context.beginPath();
        context.strokeStyle = "rgb(250,0,0)";
        context.fillStyle = "rgb(250,0,0)"


        //实验证明第一次lineTo的时候和moveTo功能一样
        context.lineTo(100, 100);
        // //之后的lineTo会以上次lineTo的节点为开始
        context.lineTo(200, 200);
        context.lineTo(200, 100);
        context.moveTo(200, 50);
        context.lineTo(100, 50);
        context.stroke();
    }
    draw8("app")
    </script>
</body>

</html>
